<template id='itemlist-tpl' class='container-fluid'>
  <div class='table-responsive col-sm-12'>
    <ul class='media-list row contacts-container'></ul>
    <table class="table table-bordered table-condensed table-striped">
      <thead>
      <tr class="info">
        <th></th>
        <th>originname</th>
        <th>upduser</th>
        <th>upddate</th>
        <th>curname</th>
        <th>parent</th>
        <th>oper</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in items">
        <td><input type="checkbox" v-model="item.selected"></td>
        <td><a href="#" v-on:click="onChange(item)">{{item.originname}}</a>
          <ul class="media-list row contacts-container"></ul>
        </td>
        <td>{{item.upduser}}</td>
        <td>{{item.upddate}}</td>
        <td>{{item.curname}}</td>
        <td>{{item.parent}}</td>
        <td>
          <a href="#" v-on:click="onEditItem(item)">编辑</a>&nbsp;|
          <a href="#" v-on:click="onRemoveItem(item)">删除</a>&nbsp;|
          <a href="#download" v-on:click="ondownload(item)">下载</a>&nbsp;|
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<style>
</style>
<script>
  // import {getItems} from './getters'
  import Vue from 'vue'
  import resource from 'vue-resource'
  Vue.use(resource)
  export default{
    mode: 'modeList',
    data: function () {
      return {
        items: []
      }
    },
    props: ['method', 'item', 'curitems', 'delitems', 'url'],
    methods: {
      find: function () {
        Vue.http.headers.common['Token'] = window.localStorage.getItem('Token')
        this.$http.get(this.url).then(function (response) {
          this.items = response.data
          this.$dispatch('items', response.data)
        }, function (response) {
          if (response.status === 401) {
            window.alert('请登陆 ')
          } else {
            window.alert('Probably failed to connect the backend server! Pls check your server status! ')
          }
        })
      },
      backToParent: function (p) {
        this.$http.get(this.url + p + '/children').then(function (response) {
          this.items = response.data
          this.backToParent(p)
        }, function (response) {
          if (response.status === 500) {
            window.alert('Probably failed to connect the backend server! Pls check your server status! ')
          }
        })
      },
      remove: function (item) {
        this.$http.delete(this.url + item.uuid).then(function (response) {
          this.find()
        }, function (response) {
          if (response.status === 500) {
            window.alert('Probably failed to connect the backend server! Pls check your server status! ')
          }
        })
      },
      onEditItem: function (item) {
        this.$dispatch('item', item)
        this.$dispatch('component', 'modeEdit')
      },
      onRemoveItem: function (item) {
        var r = window.confirm('确定删除？')
        if (r === true) {
          this.remove(item)
        }
      },
      ondownload: function (item) {
        console.log('downloading')
        console.log(item)
        if (item.originname.indexOf('.') === -1) {
          window.alert('文件夹不能下载')
        } else {
          var suffix = item.originname.substring(item.originname.lastIndexOf('.') + 1)
          var filename = item.uuid + '.' + suffix
          var day = item.crtdate.substr(0, 10)
          day = day.replace(/-/g, '')
          window.location.href = 'http://euvee.vicp.co/rest/file?filename=' + filename + '&day=' + day
        }
      },
      onChange: function (item) {
        this.$http.get(this.url + item.uuid + '/children').then(function (response) {
          this.items = response.data
          this.$broadcast('items2', this.items)
        }, function (response) {
          if (response.status === 500) {
            window.alert('Probably failed to connect the backend server! Pls check your server status! ')
          }
        })
      },
      onback: function () {
        console.log('backToParent thisitems ' + this.items)
        var p = this.items.parent
        console.log('backToParent ' + p)
        // 根节点
        if (p == null) {
          this.find()
        } else {
          this.backToParent(p)
        }
      }
    },
    ready: function () {
      this.find()
    },
    events: {
      'curitems': function () {
        this.find()
      },
      'deleteitems': function (item) {
        console.log('delete all in list')
        this.remove(item)
      },
      'removeitems': function (item) {
        console.log('remove all in list')
        this.remove(item)
      },
      'onback': function () {
        console.log('onback has been called')
        this.onback()
      }
    }
  }
</script>
